import { type FC, useRef } from "react";
import classNames from "classnames";
import contentStyle from "../../index.module.scss";
import styles from "./index.module.scss";
import { usePersonalDetailsStore, useStore } from "@/store";
import { getPersonalItem } from "@/cvcomponents/common/utils";
import Avator from "@/cvcomponents/common/Avator";

interface IndexProps {}

const Index: FC<IndexProps> = () => {
  const { personalDetails } = usePersonalDetailsStore();
  const { setCurrentTab } = useStore();
  return (
    <div
      className={classNames(styles.personalDetail, contentStyle.card)}
      onClick={() => {
        setCurrentTab("personalDetailEdit");
      }}
    >
      <div className={styles.editButton}>
        <svg
          style={{ width: "18px" }}
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 14 14"
          className="w-4"
        >
          <path
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
            d="M6.704 1.627H4.523c-1.794 0-2.919 1.27-2.919 3.068v4.85c0 1.797 1.12 3.067 2.919 3.067H9.67c1.8 0 2.92-1.27 2.92-3.068v-2.35"
          ></path>
          <path
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
            d="M5.15 6.37l4.36-4.359a1.391 1.391 0 011.966 0l.71.71a1.39 1.39 0 010 1.967l-4.38 4.38c-.238.237-.56.37-.896.37H4.725l.054-2.204c.009-.324.141-.634.37-.864z"
            clipRule="evenodd"
          ></path>
          <path
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
            d="M8.847 2.685l2.663 2.663"
          ></path>
        </svg>
      </div>
      {/* <div className={styles.topAvator}>
      <Avator url={personalDetails?.photoObj?.photo} shape='circle' showPhoto={personalDetails?.photoObj?.showPhoto}></Avator>
    </div> */}
      <div
        className={classNames(styles.resumeName, {
          [styles.disabled]: !personalDetails.name,
        })}
      >
        {personalDetails.name || "你的姓名"}
      </div>
      <div className={styles.jobTitle}>{personalDetails.expJob}</div>
      <div className={styles.row}>
        <div>
          <div
            className={classNames(styles.info, {
              [styles.disabled]: !personalDetails.email,
            })}
          >
            <svg
              style={{ width: "18px" }}
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              className="mr-2 w-[1.5em] min-w-[1.5em]"
            >
              <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.5"
                d="M17.268 9.061l-4.266 3.434a2.223 2.223 0 01-2.746 0L5.954 9.061"
              ></path>
              <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.5"
                d="M6.888 3.5h9.428c1.36.015 2.653.59 3.58 1.59a5.017 5.017 0 011.326 3.704v6.528a5.017 5.017 0 01-1.326 3.704 4.957 4.957 0 01-3.58 1.59H6.888C3.968 20.616 2 18.241 2 15.322V8.794C2 5.875 3.968 3.5 6.888 3.5z"
                clipRule="evenodd"
              ></path>
            </svg>
            {personalDetails.email || "邮箱"}
          </div>
          <div
            className={classNames(styles.info, {
              [styles.disabled]: !personalDetails.phoneNumber,
            })}
          >
            <svg
              style={{ width: "18px" }}
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 25"
            >
              <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.5"
                d="M2.99 5.765c.316-.525 2.06-2.43 3.303-2.372.372.032.7.256.967.516h.001c.613.6 2.369 2.864 2.467 3.34.244 1.169-1.15 1.842-.724 3.02 1.087 2.659 2.96 4.531 5.62 5.617 1.176.427 1.85-.966 3.019-.723.476.1 2.74 1.854 3.34 2.467v0c.26.266.485.596.516.968.046 1.31-1.977 3.076-2.371 3.302-.93.667-2.145.655-3.625-.033-4.13-1.719-10.73-8.193-12.48-12.479-.669-1.471-.714-2.694-.033-3.623z"
                clipRule="evenodd"
              ></path>
              <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.5"
                d="M14.565 3.642a7.97 7.97 0 017.041 7.032M14.565 7.185a4.426 4.426 0 013.498 3.498"
              ></path>
            </svg>

            <span>{personalDetails.phoneNumber || "手机号"}</span>
          </div>
          <div
            className={classNames(styles.info, {
              [styles.disabled]:
                !personalDetails.birthDay || !personalDetails.birthDay?.year,
            })}
          >
            <svg
              style={{ width: "18px" }}
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              width="32"
              height="20"
            >
              <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.5"
                d="M608 684.8c-158.4 0-286.4-128-286.4-286.4S449.6 112 608 112s286.4 128 286.4 286.4-128 286.4-286.4 286.4zM608 176c-123.2 0-222.4 99.2-222.4 222.4S484.8 620.8 608 620.8s222.4-99.2 222.4-222.4S731.2 176 608 176zM289.6 644.8c-3.2 0-6.4 0-9.6-1.6-94.4-32-158.4-120-158.4-219.2 0-83.2 44.8-160 116.8-201.6 16-8 35.2-3.2 43.2 12.8s3.2 35.2-12.8 43.2c-52.8 30.4-84.8 84.8-84.8 145.6 0 72 46.4 136 113.6 158.4 16 4.8 25.6 24 20.8 40-3.2 12.8-16 22.4-28.8 22.4zM936 912c-8 0-17.6-3.2-24-9.6-80-84.8-188.8-131.2-305.6-131.2-116.8 0-225.6 46.4-305.6 131.2-12.8 12.8-32 12.8-44.8 1.6s-12.8-32-1.6-44.8c92.8-97.6 217.6-152 352-152s259.2 54.4 352 152c12.8 12.8 11.2 33.6-1.6 44.8-4.8 4.8-12.8 8-20.8 8zM94.4 832c-8 0-16-3.2-22.4-8-12.8-12.8-12.8-32-1.6-44.8 60.8-64 142.4-105.6 230.4-116.8 17.6-1.6 33.6 9.6 35.2 27.2 1.6 17.6-9.6 33.6-27.2 35.2-73.6 9.6-140.8 44.8-192 97.6-4.8 6.4-12.8 9.6-22.4 9.6z"
              ></path>
            </svg>
            {getPersonalItem(personalDetails, "birthDay") || "出生日期"}
          </div>
        </div>
        <div className={styles.bottomAvator}>
          <Avator {...personalDetails?.photoObj} size="XS"></Avator>
        </div>
      </div>
    </div>
  );
};

export default Index;
